<template>
  <div class="myHead">
    <div class="miniLogo">
      <!-- <img class="schooLogo miniSchoolLogo" src="../assets/bijxy.png" /> -->
      <img class="schooLogo miniSchoolLogo" :src="contentInfoConfig.logo_img" />
    </div>
    <div class="logo">
      <div class="theLogo">
        <!-- <img class="schooLogo miniSchoolLogo" src="../assets/bijxy.png" /> -->
        <img
          class="schooLogo miniSchoolLogo"
          :src="contentInfoConfig.logo_img"
        />
      </div>

      <div class="headRight">
        <div class="headIN">
          <span class="init">首页</span> &nbsp;|&nbsp;
          <span class="init">继续教育</span>&nbsp;|&nbsp;
          <span class="init">成人教育</span>&nbsp; |&nbsp;
          <span class="init">自学考试</span>&nbsp; | &nbsp;<span class="init"
            >联系我们</span
          >
        </div>
        <div class="underIn">
          <div class="sing init" @click="openLogin">
            <img class="singImage" src="../assets/sing.svg" /><span class=""
              >登录</span
            >
          </div>
          <div class="myINput">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              :clearable="true"
              v-model="input2"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="myTab">
      <div class="tab">
        <div
          :class="[index == currin ? 'selectINS' : '']"
          @click="tuchTab(index)"
          v-for="(item, index) in TabList"
          :key="index"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="miniNav">
      <div class="inNav">
        <div class="barInm">
          <div class="navleft">
            <div class="inButt" id="menue">
              <i class="el-icon-s-operation"></i>

              <div class="miniTab" id="menueSon">
                <div class="inMinBar">
                  <div
                    class=""
                    @click="tuchTab(index)"
                    v-for="(item, index) in TabList"
                    :key="index"
                  >
                    <div class="inMenue">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="" style="font-family: PingFang SC">FREE CAMPUS</div>
          </div>

          <div class="navRight">
            <div :class="[seach == true ? 'miniInputShow ' : 'miniInput']">
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input2"
              >
              </el-input>
            </div>
            <div class="inSearch" @click="tuchSearch">
              <i class="el-icon-search" style="font-weight: bold"> </i>
            </div>
            <div class="inD">
              <i class="el-icon-s-custom" style="font-weight: bold"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      seach: false,
      input2: "",
      currin: 0,
      restaurants: [],
      state: "",
      timeout: null,
      msg: "",
      TabList: [
        {
          name: "首页",
        },
        {
          name: "政策支持",
        },
        {
          name: "新闻通知",
        },
        {
          name: "学校介绍",
        },
        {
          name: "学习帮助",
        },
      ],
    };
  },
  methods: {
    openLogin() {
      this.$router.push("login");
    },

    tuchTab(index) {
      this.currin = index;
      if (this.currin == 0) {
        this.$router.push("Content");
      } else if (this.currin == 1) {
        this.$router.push("policyItems");
      } else if (this.currin == 2) {
        this.$router.push("newsInforms");
      } else if (this.currin == 3) {
        this.$router.push("introductions");
      } else if (this.currin == 4) {
        this.$router.push("help");
      }
    },
    tuchSearch() {
      this.seach = !this.seach;
    },
  },
  computed: mapState(["contentInfoConfig"]),
  mounted() {},
};
</script>

<style scoped="scoped" lang="scss">
@media screen and (min-width: 8px) {
  .miniLogo {
    margin-top: 30px;
    text-align: center;
  }

  #menue:hover #menueSon {
    height: 380px;
    transition: all 0.6s;
  }

  .miniLogo img {
    height: 70px;
  }

  .theLogo {
    // width: 100%;
    text-align: center;
  }

  #inSeach:hover #searchSon {
    display: block;
    width: 120px;
    transition: all 0.6s;
  }

  #menueSon {
    transition: all 0.6s;
  }

  .miniInputShow {
    width: 160px;
    transition: all 0.6s;
    // animation: zt 10s ease 0.5s forwards;
  }

  .miniInput {
    overflow: hidden;
    transition: all 0.6s;
    width: 0px;
    // animation: zt 10s ease 0.5s forwards;
  }

  .searchSon {
    display: block;
    width: 200px;
  }

  #menue:hover #menueSon {
    height: 380px;
    transition: all 0.6s;
  }

  #menueSon {
    transition: all 0.6s;
  }

  .inD {
  }

  .inMenue {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    cursor: pointer;
    font-size: 20px;
  }

  .inMenue:hover {
    border-bottom: solid 1px white;
    font-weight: bold;
    background-color: #0270be;
  }

  .inMinBar {
    // padding:16px 0;
    background-color: #0270becc;
    width: 210px;
  }

  .miniTab {
    height: 0px;
    overflow: hidden;
    width: 480px;
    position: absolute;
    top: 195px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
  }

  .navRight {
    display: flex;
    align-items: center;
  }

  .inSearch {
    padding: 16px;
  }

  .navRight div {
    // padding: 16px;
  }

  .navleft {
    display: flex;
    align-items: center;
  }

  .miniNav {
    display: block;
    width: 100%;
  }

  .inButt {
    padding: 16px;
    margin-right: 16px;
    background-color: #027bd3;
  }

  .barInm {
    font-size: 20px;
    width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .inNav {
    margin-top: 40px;
    width: 100%;
    color: #ffffff;
    background-image: url(../assets/nav-bg.jpg);
  }

  .tac {
    display: none;
  }

  .headRight {
    display: none;
    // display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .sing {
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .singImage {
    width: 24px;
    height: 24px;
  }

  .sing span {
    margin-left: 8px;
  }

  .myINput {
    display: none;
    width: 160px;
    margin-left: 24px;
  }

  .underIn {
    margin-top: 24px;
    margin-left: 80px;
    align-items: center;
    display: flex;
  }

  .init:hover {
    color: #0589eb;
  }

  .headIN {
    display: none;
    font-size: 16px;
    cursor: pointer;
    color: #938486;
  }

  .myTab {
    width: 100%;
    background-image: url(../assets/nav-bg.jpg);
  }

  .myHead {
    width: 100%;
    // background: url(../assets/h-icon3_02.jpg)center 50% no-repeat;
    // background-color: #3d69bf;
    // height: 220px;

    .logo {
      padding-top: 40px;
      margin-left: 50%;
      transform: translateX(-50%);
      width: 480px;
      display: none;
      justify-content: center;
      height: 60px;

      .myin {
        margin-top: 20px;
        width: 220px;
      }

      .schooLogo {
        // margin-top: 10px;
        height: 70px;
      }

      .miniSchoolLogo {
        margin: 0 auto;
      }
    }

    .tab {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 70px;
      width: 800px;
      display: none;
      height: 80px;

      div {
        flex: 1;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 68px;
        // border: solid 1px white;
        color: #ffffff;
        letter-spacing: 0.5pt;
        font-size: 20px;
        cursor: pointer;
      }

      .selectIN {
        background-color: #014b81;
        color: #ffffff;
      }

      .selectINS {
        background-color: #027bd3;
        font-weight: bold;
        color: #ffffff;
        height: 68px;
      }

      .selectINS span {
        margin-top: 3px;
        border-bottom: solid 2px #ffffff;
        padding-bottom: 3px;
      }
    }
  }
}

/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width: 728px) {
  .theLogo {
    text-align: left;
  }

  #menue:hover #menueSon {
    height: 380px;
    transition: all 0.6s;
  }

  #inSeach:hover #searchSon {
    display: block;
    width: 200px;
    transition: all 0.6s;
  }

  #menueSon {
    transition: all 0.6s;
  }

  .miniInputShow {
    width: 160px;
    transition: all 0.6s;
    // animation: zt 10s ease 0.5s forwards;
  }

  .miniInput {
    overflow: hidden;
    transition: all 0.6s;
    width: 0px;
    // animation: zt 10s ease 0.5s forwards;
  }

  .searchSon {
    display: block;
    width: 200px;
  }

  #menue:hover #menueSon {
    height: 380px;
    transition: all 0.6s;
  }

  #menueSon {
    transition: all 0.6s;
  }

  .inD {
  }

  .inMenue {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    cursor: pointer;
    font-size: 20px;
  }

  .inMenue:hover {
    border-bottom: solid 1px white;
    font-weight: bold;
    background-color: #0270be;
  }

  .inMinBar {
    // padding:16px 0;
    background-color: #0270becc;
    width: 210px;
  }

  .miniTab {
    height: 0px;
    overflow: hidden;
    width: 620px;
    position: absolute;
    top: 195px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
  }

  .navRight {
    display: flex;
    align-items: center;
  }

  .inSearch {
    padding: 16px;
  }

  .navRight div {
    // padding: 16px;
  }

  .navleft {
    display: flex;
    align-items: center;
  }

  .miniNav {
    display: block;
    width: 100%;
  }

  .inButt {
    padding: 16px;
    margin-right: 16px;
    background-color: #027bd3;
  }

  .barInm {
    font-size: 20px;
    width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .inNav {
    margin-top: 40px;
    width: 100%;
    color: #ffffff;
    background-image: url(../assets/nav-bg.jpg);
  }

  .tac {
    display: none;
  }

  .headRight {
    display: none;
    // display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .sing {
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .singImage {
    width: 24px;
    height: 24px;
  }

  .sing span {
    margin-left: 8px;
  }

  .myINput {
    display: none;
    width: 160px;
    margin-left: 24px;
  }

  .underIn {
    margin-top: 24px;
    margin-left: 80px;
    align-items: center;
    display: flex;
  }

  .init:hover {
    color: #0589eb;
  }

  .headIN {
    display: none;
    font-size: 16px;
    cursor: pointer;
    color: #938486;
  }

  .myTab {
    width: 100%;
    background-image: url(../assets/nav-bg.jpg);
  }

  .myHead {
    width: 100%;
    // background: url(../assets/h-icon3_02.jpg)center 50% no-repeat;
    // background-color: #3d69bf;
    // height: 220px;

    .logo {
      padding-top: 40px;
      margin-left: 50%;
      transform: translateX(-50%);
      width: 620px;
      display: none;
      justify-content: space-between;
      height: 60px;

      .myin {
        margin-top: 20px;
        width: 220px;
      }

      .schooLogo {
        // margin-top: 10px;
        height: 70px;
      }

      .miniSchoolLogo {
        margin: 0 auto;
      }
    }

    .tab {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 70px;
      width: 800px;
      display: none;
      height: 80px;

      div {
        flex: 1;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 68px;
        // border: solid 1px white;
        color: #ffffff;
        letter-spacing: 0.5pt;
        font-size: 20px;
        cursor: pointer;
      }

      .selectIN {
        background-color: #014b81;
        color: #ffffff;
      }

      .selectINS {
        background-color: #027bd3;
        font-weight: bold;
        color: #ffffff;
        height: 68px;
      }

      .selectINS span {
        margin-top: 3px;
        border-bottom: solid 2px #ffffff;
        padding-bottom: 3px;
      }
    }
  }
}

/* 小型设备（平板电脑，768px 起） */
@media screen and (min-width: 992px) {
  .miniLogo {
    display: none;
  }

  .miniTab {
    display: none;
  }

  .miniNav {
    display: none;
  }

  .tac {
    display: none;
  }

  .headRight {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .sing {
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .singImage {
    width: 24px;
    height: 24px;
  }

  .sing span {
    margin-left: 8px;
  }

  .myINput {
    display: block;
    width: 160px;
    margin-left: 24px;
  }

  .underIn {
    margin-top: 24px;
    margin-left: 80px;
    align-items: center;
    display: flex;
  }

  .init:hover {
    color: #0589eb;
  }

  .headIN {
    display: block;
    font-size: 16px;
    cursor: pointer;
    color: #938486;
  }

  .myTab {
    width: 100%;
    background-image: url(../assets/nav-bg.jpg);
  }

  .myHead {
    width: 100%;
    // background: url(../assets/h-icon3_02.jpg)center 50% no-repeat;
    // background-color: #3d69bf;
    height: 240px;

    .logo {
      padding-top: 40px;
      margin-left: 50%;
      transform: translateX(-50%);
      width: 800px;
      display: flex;
      justify-content: space-between;
      height: 60px;

      .myin {
        margin-top: 20px;
        width: 220px;
      }

      .schooLogo {
        margin-top: 10px;
        height: 60px;
      }
    }

    .tab {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 70px;
      width: 800px;
      display: flex;
      height: 80px;

      div {
        flex: 1;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 68px;
        // border: solid 1px white;
        color: #ffffff;
        letter-spacing: 0.5pt;
        font-size: 20px;
        cursor: pointer;
      }

      .selectIN {
        background-color: #014b81;
        color: #ffffff;
      }

      .selectINS {
        background-color: #027bd3;
        font-weight: bold;
        color: #ffffff;
        height: 68px;
      }

      .selectINS span {
        margin-top: 3px;
        border-bottom: solid 2px #ffffff;
        padding-bottom: 3px;
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .miniLogo {
    display: none;
  }

  .miniTab {
    display: none;
  }

  .headRight {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .sing {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .singImage {
    width: 24px;
    height: 24px;
  }

  .sing span {
    margin-left: 8px;
  }

  .myINput {
    display: block;
    width: 280px;
    margin-left: 24px;
  }

  .underIn {
    margin-left: 80px;
    align-items: center;
    display: flex;
  }

  .init:hover {
    color: #0589eb;
  }

  .headIN {
    display: block;
    font-size: 18px;
    cursor: pointer;
    color: #938486;
  }

  .myTab {
    width: 100%;
    background-image: url(../assets/nav-bg.jpg);
  }

  .myHead {
    width: 100%;
    // background: url(../assets/h-icon3_02.jpg)center 50% no-repeat;
    // background-color: #3d69bf;
    height: 240px;

    .logo {
      padding-top: 40px;
      margin-left: 50%;
      transform: translateX(-50%);
      width: 1200px;
      display: flex;
      // justify-content: space-between;
      height: 60px;

      .myin {
        margin-top: 20px;
        width: 220px;
      }

      .schooLogo {
        margin-top: -10px;
        height: 100px;
      }
    }

    .tab {
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 70px;
      width: 1200px;
      border-top: solid 1px #547fc8;
      display: flex;
      height: 80px;

      div {
        flex: 1;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 68px;
        // border: solid 1px white;
        color: #ffffff;
        letter-spacing: 1.5pt;
        font-size: 20px;
        cursor: pointer;
      }

      .selectIN {
        background-color: #014b81;
        color: #ffffff;
      }

      .selectINS {
        background-color: #027bd3;
        font-weight: bold;
        color: #ffffff;
        height: 68px;
      }

      .selectINS span {
        margin-top: 3px;
        border-bottom: solid 2px #ffffff;
        padding-bottom: 3px;
      }
    }
  }
}
</style>
